/**
 * Filters
 * @module filters
 * {@link http://www.w3.org/TR/filter-effects-1/ Specification}
 * =====================================================================================================================
 */

/**
 * Grayscale
 * Does not work in IE 10-11
 * Supported in Edge 12 under the "Enable CSS filter property" flag
 * {@link http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html Karl Horky Blog}
 *
 * @example
 * .grayscale();
 * .grayscale(none);
 */
.grayscale() {
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='saturate' values='0'/></filter></svg>#grayscale"); // Firefox 34-3.6
    -webkit-filter: grayscale(1); // Chrome 18+, Safari 6+, Opera 15+
            filter: grayscale(1); // Firefox 35+, Edge 13
            filter: gray; // IE 9-6
}
.grayscale(@value) when (@value = none) {
    -webkit-filter: grayscale(0);
            filter: grayscale(0);
}